<template>
    <div class="drag-container">
        <!-- 拖拽列表组件 -->
        <draggable v-model="list" item-key="id" @end="onDragEnd">
            <template #item="{element}">
                <div class="drag-item">
                    {{ element.name }}
                </div>
            </template>
        </draggable>
    </div>
</template>

<script setup>
import {ref} from "vue";
import draggable from "vuedraggable";

// 列表数据
const list = ref([
    {id: 1, name: "Item 1"},
    {id: 2, name: "Item 2"},
    {id: 3, name: "Item 3"},
]);

// 拖拽结束回调
const onDragEnd = (event) => {
    console.log("原始位置:", event.oldIndex);
    console.log("新位置:", event.newIndex);
    //可以进行数据更新
};
</script>

<style scoped>
.drag-container {
    max-width: 400px;
    margin: 20px auto;
}

.drag-item {
    padding: 12px;
    margin: 8px 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: move;
    transition: all 0.3s ease;
}

.drag-item:hover {
    background: #f5f5f5;
}

/* 拖拽时的样式 */
.drag-item.sortable-chosen {
    background: #e6f4ff;
    border-color: #1890ff;
}

/* 占位符样式 */
.sortable-ghost {
    opacity: 0.5;
    background: #f0f0f0;
}
</style>
